<template>
  <div class="app-container">
    <h2>数据分析</h2>
    
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>访问趋势</span>
              <el-radio-group v-model="timeRange" size="small">
                <el-radio-button label="week">近一周</el-radio-button>
                <el-radio-button label="month">近一月</el-radio-button>
                <el-radio-button label="year">全年</el-radio-button>
              </el-radio-group>
            </div>
          </template>
          <div class="chart-placeholder">
            访问量趋势图表（此处实际项目中使用ECharts实现）
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <el-row :gutter="20" class="mt-20">
      <el-col :span="12">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>用户分布</span>
            </div>
          </template>
          <div class="chart-placeholder">
            用户地域分布图（此处实际项目中使用ECharts实现）
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>设备占比</span>
            </div>
          </template>
          <div class="chart-placeholder">
            访问设备占比图（此处实际项目中使用ECharts实现）
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <el-row :gutter="20" class="mt-20">
      <el-col :span="24">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>热门页面</span>
            </div>
          </template>
          <el-table :data="pageData" border style="width: 100%">
            <el-table-column prop="rank" label="排名" width="80" />
            <el-table-column prop="page" label="页面路径" />
            <el-table-column prop="pv" label="访问量" />
            <el-table-column prop="uv" label="访客数" />
            <el-table-column prop="avgTime" label="平均停留时间" />
            <el-table-column prop="bounceRate" label="跳出率" />
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref } from 'vue'

// 时间范围
const timeRange = ref('week')

// 页面数据
const pageData = ref([
  { rank: 1, page: '/dashboard', pv: 8954, uv: 3652, avgTime: '00:02:35', bounceRate: '35%' },
  { rank: 2, page: '/login', pv: 5234, uv: 2415, avgTime: '00:00:55', bounceRate: '25%' },
  { rank: 3, page: '/profile', pv: 4321, uv: 1892, avgTime: '00:01:46', bounceRate: '28%' },
  { rank: 4, page: '/system/user', pv: 3257, uv: 1432, avgTime: '00:03:12', bounceRate: '42%' },
  { rank: 5, page: '/data/analysis', pv: 2876, uv: 1021, avgTime: '00:04:23', bounceRate: '31%' }
])
</script>

<style scoped>
.app-container {
  width: 100%;
  padding: 10px;
}

.mt-20 {
  margin-top: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chart-placeholder {
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f8f8f8;
  border-radius: 4px;
  color: #909399;
}
</style> 